<div class="m-grid__item m-grid__item--fluid m-grid m-grid--desktop m-grid--ver-desktop m-grid--hor-tablet-and-mobile m-login m-login--6" id="m_login">
	<div class="m-grid__item   m-grid__item--order-tablet-and-mobile-2 m-grid m-grid--hor m-login__aside" style="background-image: url(assets/app/media/img/bg/bg-4.jpg);">
		<div class="m-grid__item">
			<div class="m-login__logo">
				<a href="#">
					<img src="./assets/app/media/img/logos/logo-4.png">
				</a>
			</div>
		</div>

		<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver">
			<div class="m-grid__item m-grid__item--middle">
				<span class="m-login__title">Whatever CTA's wave purpose important exit element</span>
				<span class="m-login__subtitle">Lorem ipsum amet estudiat</span>
			</div>
		</div>

		<div class="m-grid__item">
			<div class="m-login__info">
				<div class="m-login__section">
					<a href="javascript:;" class="m-link">&copy; {{today | date:'yyyy'}} Metronic</a>
				</div>
				<div class="m-login__section">
					<a href="javascript:;" class="m-link">Privacy</a>
					<a href="javascript:;" class="m-link">Legal</a>
					<a href="javascript:;" class="m-link">Contact</a>
				</div>
			</div>
		</div>
	</div>

	<div class="m-grid__item m-grid__item--fluid  m-grid__item--order-tablet-and-mobile-1 m-login__wrapper">
		<!--begin::Head-->
		<div class="m-login__head">
			<span translate="AUTH.GENERAL.NO_ACCOUNT">Don't have an account?</span>
			<a href="javascript:;" (click)="register()" class="m-link m--font-danger" translate="AUTH.GENERAL.SIGNUP_BUTTON">Sign Up</a>
		</div>
		<!--end::Head-->

		<!--begin::Body-->
		<div class="m-login__body">
			<m-login *ngIf="action === 'login'" [(action)]="action"></m-login>

			<m-register *ngIf="action === 'register'" [(action)]="action"></m-register>

			<m-forgot-password *ngIf="action === 'forgot-password'" [(action)]="action"></m-forgot-password>
		</div>
		<!--end::Body-->
	</div>
</div>
